<template>
  <d2-container :filename="filename">
    <el-row>
      <el-form label-width="80px"
               ref="updateForm"
               :inline="true">
        <el-form-item>
          <el-button type="primary"
                     v-has="'search'"
                     @click="search()"
                     icon="el-icon-search">查询</el-button>
          <el-button type="success"
                     v-has="'tongbu'"
                     @click="tongbu()"
                     icon="el-icon-menu"
                     :loading="tongbuLoading">全量同步菜单</el-button>

          <el-button type="danger"
                     v-has="'delete'"
                     size="mini"
                     icon="el-icon-delete"
                     @click="deleteall()"
                     :loading="deleteLoading">删除全部并同步</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card>
            <div slot="header"
                 class="clearfix">
              <span>菜单列表</span>
              <el-button style="float: right;"
                         type="primary"
                         v-has="'add'"
                         @click="add()"
                         size="mini"
                         icon="el-icon-plus">添加一级菜单</el-button>
            </div>
            <template>
              <!-- <el-table
                :data="formData"
                style="width: 100%"
                v-loading="tableLoading"
              >
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                      style="width:100%"
                      type="text"
                      @click="handleShow(scope.row)"
                      >{{ scope.row.name }}</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      @click="deleteyiji(scope.row)"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                    <el-button
                      type="primary"
                      @click="handleShow(scope.row)"
                      icon="el-icon-edit"
                      circle
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table> -->
              <el-tree :data="formData"
                       :props="defaultProps"
                       default-expand-all
                       accordion
                       :expand-on-click-node="false"
                       v-loading="tableLoading">
              </el-tree>
            </template>
          </el-card>
        </el-col>
        <el-col :span="18"> 111</el-col>
      </el-row>
    </el-row>
    <!-- <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <el-row>
        <el-form label-width="80px" ref="createForm" :model="diaData">
          <el-form-item
            label="角色名称"
            prop="name"
            v-if="chsubtton.length <= 0"
          >
            <el-input v-model="diaData.name" />
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="comit()">确 定</el-button>
      </span>
    </el-dialog> -->
  </d2-container>
</template>

<script>
import { Get, Delete, Create } from '@api/weiXinMPManage/menuManage'
export default {
  name: 'roleManage',
  inject: ['reload'],
  data () {
    return {
      filename: __filename,
      formData: [],
      tableLoading: false,
      deleteLoading: false,
      tongbuLoading: false,
      dialogVisible: false,
      chsubtton: [], // 新增修改时是否有子菜单  有子菜单只显示name属性
      sort: 1, // 一级菜单还是二级
      checkData: {

      },
      fristarr: [],
      defaultProps: {
        children: 'sub_button',
        label: 'name'
      },
      title: '新增'
    }
  },
  created () {
    this.search()
  },
  methods: {
    handleNodeClick (data) {
      var index = data.indexOf(data)
      if (index > -1) {
        this.sort = 1
      }
      this.checkData = data
    },
    renderContent (h, { node, data, store }) {
      var content = ''
      var index = this.fristarr.indexOf(data.name)
      if (index > -1) {
        content = (
          <div class="custom-tree-node">
            <span style="color: #67C23A;">{data.name}</span>
            <span>
              <el-button
                size="mini"
                type="text"
                on-click={() => this.openAddPage(data)}
              >
                添加二级菜单
              </el-button>

              <el-button
                size="mini"
                type="text"
                on-click={() => this.delete(node, data)}
              >
                删除
              </el-button>
            </span>
          </div>
        )
      } else {
        content = (
          <div class="custom-tree-node">
            <span style="color: #67C23A;">{data.name}</span>
            <span>
              <el-button
                size="mini"
                type="text"
                on-click={() => this.delete(node, data)}
              >
                删除
              </el-button>
            </span>
          </div>
        )
      }
      return content
    },
    tongbu () {
      this.$confirm('操作后公众号菜单将被全量覆盖，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLoading = true
        Create().then(res => {
          if (res.success) {
            this.deleteLoading = false
            this.$notify({
              title: '提示',
              message: '同步成功成功',
              type: 'success'
            })
          }
        })
      })
    },
    search () {
      this.tableLoading = true
      Get().then(res => {
        this.formData = res.result.items
        try {
          this.fristarr = []
          for (var i = 0; i < this.formData.length; i++) {
            this.fristarr.push(this.formData[i].name)
          }
        } catch (e) {
          this.tableLoading = false
          this.formData = []
        }
        this.tableLoading = false
      })
    },
    deleteall () {
      this.$confirm('操作后公众号菜单将全部被删除，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLoading = true
        Delete().then(res => {
          if (res.success) {
            this.deleteLoading = false
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'
            })
            this.search()
          }
        })
      })
    },
    handleClose () {
      this.dialogVisible = false
      this.$emit('fromvisible', false)
    }
  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
